<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:gpymes="http://java.sun.com/jsf/composite/gpymes">
 
    <!-- INTERFACE -->
    <cc:interface>

        <cc:attribute name="titulo"/>
        <cc:attribute name="toggleable"/>
        <cc:attribute name="collapsed"/>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        
        <p:fieldset legend="#{cc.attrs.titulo}" toggleable="#{cc.attrs.toggleable}" collapsed="#{cc.attrs.collapsed}">  
            <div style="background-color: #dddddd">
                <p:separator/>
                <table>
                    <tr>                      
                        <td style="text-align: left">
                            Tipo
                        </td>
                        <td style="text-align: left" colspan="2">
                            Atributo
                        </td>
                    </tr>
                    <tr>                      
                        <td style="text-align: left">
                            <h:selectOneMenu value="#{compDetAtributos.tipo}">
                                <f:selectItems value="#{productorEnums.obtTiposAtributoProducto()}"/>
                            </h:selectOneMenu>
                        </td>
                        <td style="text-align: left">
                            <gpymes:selectorColor elegido="#{compDetAtributos.color}"
                                                  lblNoSelecionado="Seleccione un color"/>

                        </td>
                        <td style="text-align: left">
                            <h:commandButton action="#{compDetAtributos.agrega()}" image="/imagenes/add.png"/>
                        </td>
                    </tr>
                </table>
                <p:separator/>
            </div>
            <p:dataTable value="#{compDetAtributos.atributos}" 
                         var="a">
                <p:column headerText="Tipo">
                    <h:outputText value="#{a.tipo}"/>
                </p:column>
                <p:column headerText="Nombre">
                    <h:outputText value="#{a.nombre}"/>
                </p:column>

                <p:column headerText="Acción">
                    <h:commandLink value="Quitar" actionListener="#{compDetAtributos.remover(a)}"/>
                </p:column>
            </p:dataTable>
        </p:fieldset>




    </cc:implementation>
</html>